<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>收货地址</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<script type="text/javascript" src="${ctxFront }/js/PCASClass.js"></script>
	<script type="text/javascript">
		var appId = '${appId}';
		var pageNo = 0;//标示页面0：信息页面  1：市区选择页面
		$(document).ready(function() {
			//初始化显示界面按钮
			var id='${address.id}';
			if(id != ""){
				$("#save_btn").hide();
				$("#edit_btn").show();
				$("#del_btn").show();
				if('${address.defaultFlag}'==0){
					$("#default_btn").show();
				}else{
					$("#default_btn").hide();
				}
				$("form input,textarea").prop("readonly", true);
			}else{
				$("#save_btn").show();
				$("#edit_btn").hide();
				$("#del_btn").hide();
				$("#default_btn").hide();
				$("div .warm-info").hide();
				$(".address-info").css("padding-left","10px");
				$(".address-detail").css("padding-left","10px");
				$("#div_detail").css("height","100px");
				$("div .warm-detail").hide();
				$("#name").focus();
			}
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element.parent());
					}
				}
			});
		});
		//打开删除确认面板
		function checkDelete(id){
			$("input[name='rId']").val(id);
			//$("#delPopup").popup("open");
			document.location="ievent://showAlert?fun=iEventDelAddressAlert()";
		}
		
		function iEventDelAddressAlert(){
			var result = {
				title:"系统提示",
				message:"确定删除该收货地址？",
				buttons:[
					{
						title:"确定",
						fun:"delAddress()" //函数名自定义的，根据json返回的fun节点值去调用相应的js函数
					},
					{
						title:"取消",
						fun:"" //同上，并且如果这里没给函数则直接执行提示层close关闭
					}	
				]		
				
			}
			if($global_isAndroid){
				window.control.showAlert(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		
		//删除
        function delAddress(){
       		var id = $("input[name='rId']").val();
			window.location.href = "${ctxShop}/address/delete?id="+id+"&appId="+appId;
		}
		//设为默认
		function setDefault(id){
			window.location.href = "${ctxShop}/address/setDefault?id="+id+"&appId="+appId;
		}
		//点击‘修改’按钮
		function setDisabled(){
			$("#save_btn").show();
			$("#edit_btn").hide();
			$("#del_btn").hide();
			$("#default_btn").hide();
			$("div .warm-info").hide();
			$(".address-info").css("padding-left","10px");
			$(".address-detail").css("padding-left","10px");
			$("#div_detail").css("height","100px");
			$("div .warm-detail").hide();
			$("form input,textarea").prop("readonly", false);
		}
		var $province = "";
		var $city = "";
		var $county = "";
		var localUrl = window.location.href.split("#")[0];
		//选择【区/县】后返回收货地址页面
		function backAddres(obj, href){
			$county=$(obj).html();
			document.location.href=localUrl+href;
			$province='上海市';
			$city='上海市';
			$("input[id='userAddr']").val($city+$county);
			$("input[name='province']").val($province);
			$("input[name='city']").val($city);
			$("input[name='county']").val($county);
			pageNo = 0;
		}
		//跳到上海市的地址选择页面
		function toSHAddrPage(obj, href){
			if($("#save_btn").css("display")=="none"){
				return;
			}
			$("#add_address").empty();//先清空记录
			var proHtml="";
			for(var i=1;i<PCAA[0][0].length;i++){
				proHtml += '<li><a href="#" class="ui-btn" onclick="backAddres(this,\'#mainPage\')" data-transition="flip">'+PCAA[0][0][i]+'</a></li>';
			}
			$("#add_address").append(proHtml);
			document.location.href=localUrl+href;
			pageNo = 1;
		}
		//跳转到省份选择页面
		function toProPage(obj, href){
			if($("#save_btn").css("display")=="none"){
				return;
			}
			$("#add_pro").empty();//先清空记录
			var proHtml="";
			for(var i=0;i<PCAP.length;i++){
				proHtml += '<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r" onclick="toCityPage(this,\'#cityPage\','+i+')" data-transition="flip">'+PCAP[i]+'</a></li>';
			}
			$("#add_pro").append(proHtml);
			document.location.href=localUrl+href;
		}
		//跳转到市级页面
		function toCityPage(obj, href, pro){
			$("#add_city").empty();//先清空记录
			$province = $(obj).html();
			var cityHtml='<li class="ui-first-child"><a href="#" class="ui-btn" style="background-color: #ECECEC;" onclick="toProPage(this,\'#proPage\')" data-transition="flip">'+PCAC[pro][0]+'</a></li>';
			for(var i=1;i<PCAC[pro].length;i++){
				cityHtml += '<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r" onclick="toCountyPage(this,\'#countyPage\','+pro+','+(i-1)+',\''+PCAC[pro][0]+'\')" data-transition="flip">'+PCAC[pro][i]+'</a></li>';
			}
			$("#add_city").append(cityHtml);
			document.location.href=localUrl+href;
		}
		//跳转到县级页面
		function toCountyPage(obj, href, pro, city, province){
			$("#add_county").empty();//先清空记录
			$city = $(obj).html();
			var countyHtml = '<li class="ui-first-child"><a href="#" class="ui-btn" style="background-color: #DADADA;" onclick="toProPage(this,\'#proPage\')" data-transition="flip">'+province+'</a></li>';
			countyHtml += '<li><a href="#" class="ui-btn" style="background-color: #ECECEC;" onclick="toCityPage(this,\'#cityPage\','+pro+')" data-transition="flip">'+PCAA[pro][city][0]+'</a></li>';
			for(var i=1;i<PCAA[pro][city].length;i++){
				countyHtml += '<li><a href="#" class="ui-btn" onclick="backAddres(this,\'#mainPage\')" data-transition="flip">'+PCAA[pro][city][i]+'</a></li>';
			}
			$("#add_county").append(countyHtml);
			document.location.href=localUrl+href;
		}
		//页面跳转函数（无参数跳转）
		function jumpPage(href){
			document.location.href=localUrl+href;
		}
		var saveOrEditFun = function(){
			setDisabled();
			document.location="iEvent://setNavgitionInfo?fun=iEventSetHeaderTitle()";
		}
	</script>
	<script type="text/javascript"> 
		function iEventGetNavgitionInfo(){
			if(pageNo==0){
				var result = {
					title:"${address.defaultFlag==1?'默认':'' }收货地址",
				    leftBtn:{ 
				    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
						backFun:"backList()"   //返回执行的事件，不带的话由iOS控制。
					},
					rightBtn:{
						bottons:[
							{
								type:1,			///0就是图片，1是文字,
								name:"修改",		//更多webNavMore.png 搜索webNavSearch.png
								fun:"iEventSave()"
							}
						]
					}                
				};
			}else{
				var result = {
					title:"${address.defaultFlag==1?'默认':'' }收货地址",
				    leftBtn:{ 
				    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
						backFun:""   //返回执行的事件，不带的话由iOS控制。
					},
					rightBtn:{
						bottons:[
							{
								type:1,			///0就是图片，1是文字,
								name:"修改",		//更多webNavMore.png 搜索webNavSearch.png
								fun:"iEventSave()"
							}
						]
					}                
				};
			}
			if('${address.id}'==''){
				saveOrEditFun = function(){
					$('#inputForm').submit();
				}
				if(pageNo==0){
					var result = {
						title:"${address.defaultFlag==1?'默认':'' }收货地址",
					    leftBtn:{ 
					    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
							backFun:"backList()"   //返回执行的事件，不带的话由iOS控制。
						},
						rightBtn:{
							bottons:[
								{
									type:1,			///0就是图片，1是文字,
									name:"保存",		//更多webNavMore.png 搜索webNavSearch.png
									fun:"iEventSave()"
								}
							]
						}                
					};
				}else{
					var result = {
						title:"${address.defaultFlag==1?'默认':'' }收货地址",
					    leftBtn:{ 
					    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
							backFun:""   //返回执行的事件，不带的话由iOS控制。
						},
						rightBtn:{
							bottons:[
								{
									type:1,			///0就是图片，1是文字,
									name:"保存",		//更多webNavMore.png 搜索webNavSearch.png
									fun:"iEventSave()"
								}
							]
						}                
					};
				}
			}
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function backList(){
			window.location.href='${ctxShop}/address?mobile='+'${user.mobile}'+'&username='+'${user.name}';
		}
		function iEventSave(){
			saveOrEditFun();
		}
		function iEventSetHeaderTitle(){
			saveOrEditFun = function(){
				$('#inputForm').submit();
			}
			
			if(pageNo==0){
				var result = {
					title:"${address.defaultFlag==1?'默认':'' }收货地址",
				    leftBtn:{ 
				    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
						backFun:"backList()"   //返回执行的事件，不带的话由iOS控制。
					},
					rightBtn:{
						bottons:[
							{
								type:1,			///0就是图片，1是文字,
								name:"保存",		//更多webNavMore.png 搜索webNavSearch.png
								fun:"iEventSave()"
							}
						]
					}                
				};
			}else{
				var result = {
					title:"${address.defaultFlag==1?'默认':'' }收货地址",
				    leftBtn:{ 
				    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
						backFun:""   //返回执行的事件，不带的话由iOS控制。
					},
					rightBtn:{
						bottons:[
							{
								type:1,			///0就是图片，1是文字,
								name:"保存",		//更多webNavMore.png 搜索webNavSearch.png
								fun:"iEventSave()"
							}
						]
					}                
				};
			}
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
	</script>
</head>
<body>
<div data-role="page" id="mainPage">
	<div data-role="main" class="ui-content" id="main_div" style="padding:0;">
		<form:form id="inputForm" modelAttribute="address" action="${ctxShop}/address/save" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<form:hidden path="user.id"/>
			<input type="hidden" id="appId" name="appId" value="${appId }"/>
			<tags:mbmessage content="${message}"/>
			<div class="address-div">
				<div class="warm-info">收货人</div>
				<form:input path="name" htmlEscape="false" maxlength="20" class="required address-info" data-role="none" placeholder="收货人姓名"/>
			</div>
			<div class="address-div">
				<div class="warm-info">手机号码</div>
				<form:input path="phone" htmlEscape="false" maxlength="12" class="required address-info" data-role="none" placeholder="手机号码"/>
			</div>
			<div class="address-div">
				<div class="warm-info">所在地区</div>
				<input id="userAddr" value="${address.city}${address.county}" onclick="toSHAddrPage(this,'#addressPage')" maxlength="100" class="required address-info" data-role="none" placeholder="所属区县"/>
				<form:hidden path="province"/>
				<form:hidden path="city"/>
				<form:hidden path="county"/>
			</div>
			<div class="address-div" id="div_detail">
				<div class="warm-detail">详细地址</div>
				<form:textarea path="address" htmlEscape="false" maxlength="200" class="required address-detail" data-role="none" placeholder="详细地址"/>
			</div>
		</form:form>
	</div>
	<div data-role="content" style="border: 1px solid #E0E0E0; background-color: #FFF; position:relative; top:50px" id="del_btn">
		<label style="color: red;" onclick="checkDelete('${address.id}')">删除收货地址</label>
	</div>
	<div data-role="footer" data-position="fixed" class="ui-btn" style="margin-bottom: 0px;position:fixed;padding:0px" id="default_btn">
		<div data-role="controlgroup" data-type="horizontal">
	 		<a href="#" onclick="setDefault('${address.id}')"><img src="${ctxFront}/images/shop/default_addr.png" style="height:40px"></img></a>
	    </div>
	</div>
	<div data-role="popup" id="delPopup" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="min-width: 300px;">
		<div data-role="header" data-theme="a">
	    	<h1>系统提示</h1>
	    </div>
	    <div role="main" class="ui-content">
	        <input type="hidden" id="rId" name="rId" value="${address.id }"/>
	        <h3 class="ui-title" style="text-align: center;">确定删除该收货地址？</h3>
	        <a href="#" style="width: 30%; margin-left: 10px;" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" onclick="delAddress();" data-transition="flow">确定</a>
	        <a href="#" style="width: 30%;" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a float-right" data-rel="back">取消</a>
	    </div>
	</div>
</div>
<!-- 只有上海市的地址 -->
<div data-role="page" id="addressPage">
	<!-- div data-role="header" data-position="fixed" data-tap-toggle="false">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
	    	<a href="#mainPage"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    </div>
		<h1>上海市</h1>
	</div> -->
	<div data-role="main" style="padding-top:0px;">
	    <ul data-role="listview" id="add_address">
	    </ul>
	</div>
</div> 

<div data-role="page" id="proPage">
	<div data-role="header" data-position="fixed" data-tap-toggle="false">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
	    	<a href="#mainPage"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    </div>
		<h1>收货地址设置</h1>
	</div>
	<div data-role="main" style="padding-top:0px;">
	    <ul data-role="listview" id="add_pro">
	    </ul>
	</div>
</div> 

<div data-role="page" id="cityPage">
	<div data-role="header" data-position="fixed">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
			<a href="#proPage"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    	<a href="#mainPage"><img class="head-close-icon" src="${ctxFront}/images/head/android/close.png"/></a>
	    </div>
		<h1>收货地址设置</h1>
	</div>
	<div data-role="main" style="padding-top: 0px;">
	    <ul data-role="listview" id="add_city">
	    </ul>
	</div>
</div> 
<div data-role="page" id="countyPage">
	<div data-role="header" data-position="fixed">
		<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
			<a href="#cityPage"><img class="head-back-icon" src="${ctxFront}/images/head/android/back.png"/></a>
	    	<a href="#mainPage"><img class="head-close-icon" src="${ctxFront}/images/head/android/close.png"/></a>
	    </div>
		<h1>收货地址设置</h1>
	</div>
	<div data-role="main" style="padding-top: 0px;">
	    <ul data-role="listview" data-icon="false" id="add_county">
	    </ul>
	</div>
</div> 
</body>
</html>
